// VideoInfo 组件的 HTML 模板

export function render(shadowRoot, css, data) {
    const hashtagsArray = data.hashtags ? data.hashtags.split(',').map(tag => tag.trim()) : [];
    
    shadowRoot.innerHTML = `
        <style>${css}</style>
        <div class="video-info">
            <!-- 作者信息区域 -->
            <div class="author-section">
                <div class="author-info">
                    <div class="avatar-container">
                        ${data.authorAvatar ? 
                            `<img src="${data.authorAvatar}" alt="${data.author}" class="avatar">` :
                            `<div class="avatar-placeholder">
                                <sl-icon name="person-circle" class="avatar-icon"></sl-icon>
                            </div>`
                        }
                        ${data.isVerified ? '<sl-icon name="patch-check-fill" class="verified-badge"></sl-icon>' : ''}
                    </div>
                    <div class="author-details">
                        <div class="author-name">${data.author}</div>
                        <div class="author-meta">
                            <span class="follow-count">粉丝 ${formatCount(Math.floor(Math.random() * 1000000))}</span>
                        </div>
                    </div>
                </div>
                <button class="follow-btn ${data.isFollowing ? 'following' : ''}" data-action="follow">
                    <sl-icon name="${data.isFollowing ? 'check' : 'plus'}" class="follow-icon"></sl-icon>
                    <span class="follow-text">${data.isFollowing ? '已关注' : '关注'}</span>
                </button>
            </div>

            <!-- 内容区域 -->
            <div class="content-section">
                ${data.title ? `<div class="video-title">${data.title}</div>` : ''}
                ${data.description ? `<div class="video-description">${data.description}</div>` : ''}
                
                <!-- 话题标签 -->
                ${hashtagsArray.length > 0 ? `
                    <div class="hashtags-container">
                        ${hashtagsArray.map(tag => `
                            <span class="hashtag" data-tag="${tag}">
                                <sl-icon name="hash" class="hashtag-icon"></sl-icon>
                                ${tag}
                            </span>
                        `).join('')}
                    </div>
                ` : ''}
            </div>

            <!-- 音乐信息 -->
            <div class="music-section">
                <sl-icon name="music-note-beamed" class="music-icon"></sl-icon>
                <div class="music-text">
                    <span class="music-label">背景音乐</span>
                    <span class="music-name">${data.backgroundMusicName || '未知音乐'}</span>
                </div>
                <div class="music-controls">
                    <div class="music-disc ${data.isPlaying ? 'spinning' : ''}">
                        <sl-icon name="disc" class="disc-icon"></sl-icon>
                    </div>
                </div>
                <audio class="background-audio" preload="none">
                    ${data.backgroundMusic ? `<source src="${data.backgroundMusic}" type="audio/mpeg">` : ''}
                </audio>
            </div>
        </div>
    `;
}

function formatCount(count) {
    if (count >= 10000) {
        return (count / 10000).toFixed(1) + 'w';
    } else if (count >= 1000) {
        return (count / 1000).toFixed(1) + 'k';
    }
    return count.toString();
}